<template>
    <div ref="mapContainer" style="width: 100%; height: 500px;"></div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  
  const mapContainer = ref(null);
  
  onMounted(() => {
    // 等待腾讯地图SDK加载完成
    if (window.qq && window.qq.maps) {
      const map = new qq.maps.Map(mapContainer.value, {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 设置默认中心点为北京
        zoom: 12, // 设置地图缩放级别
      });
  
      // 设置定位功能
      const geolocation = new qq.maps.Geolocation('YOUR_API_KEY', 'myApp');
      geolocation.getLocation((position) => {
        const lat = position.lat;
        const lng = position.lng;
        map.setCenter(new qq.maps.LatLng(lat, lng)); // 定位到用户当前位置
        const marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(lat, lng),
          map: map,
        });
      }, (error) => {
        console.error(error);
      });
    }
  });
  </script>
  
  <style scoped>
  /* 样式可以根据需求自定义 */
  </style>
  